<template>
  <div class="flex-d-col h-100%">
    <breadcrumb />
    <div class="app-main-container h-100% flex">
      <div class="left flex-d-col w-50%">
        <div class="title">
          题目详情
          <el-button plain size="small" class="pl-4px pr-4px ml-10px h-18px" @click="back"
            >返回</el-button
          >
        </div>
        <div class="flex h-100% p-30px of-y-overlay">
          <el-form :model="formData" label-width="120" class="w-100%">
            <el-form-item label="所属题库：">
              <!-- <el-input v-model="formData.name" /> -->
              <div class="bg">
                <span>{{ formData.questionBankName }}</span>
              </div>
            </el-form-item>
            <el-divider />
            <el-form-item label="来源：">
              <!-- <el-input v-model="formData.name" /> -->
              <div class="bg">
                <div class="flex">
                  <div>
                    <span>{{ formData.regulationData?.name }}</span
                    ><br />
                    <span
                      >发布日期：{{
                        dayjs(formData.regulation?.publishTime).format("YYYY-MM-DD")
                      }}</span
                    >
                  </div>
                </div>
                <div>第 {{ formData.regulationNum }} 条</div>
              </div>
            </el-form-item>
            <el-divider />
            <el-form-item label="类型：">
              <span>
                {{ categoryList.filter((e) => e.key == formData.category)?.[0]?.value }}
              </span>
              <!-- <span>{{ formData.categoryName }}</span> -->
              <!-- <template v-for="item in categoryList">
                <span v-if="item.value == formData.category">{{ item.text }}</span>
              </template> -->
            </el-form-item>
            <el-divider />
            <el-form-item label="题型：">
              <span class="type">{{ QuestionTypeEnum[formData.type] }}</span>
            </el-form-item>
            <el-divider />
            <el-form-item label="题目内容：">
              {{ formData.content }}
            </el-form-item>
            <el-divider />
            <el-form-item label="题目选项：">
              <el-table
                :data="formData.questionOptions"
                stripe
                header-cell-class-name="table-header"
                style="width: 100%"
              >
                <template v-if="[1, 2, 3, '1', '2', '3'].includes(formData.type)">
                  <el-table-column
                    width="55"
                    v-if="[1, 2, 3, '1', '2', '3'].includes(formData.type)"
                  >
                    <template #default="scope">
                      <el-checkbox
                        class="pointer-events-none"
                        v-model="scope.row.isCorrect"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column label="选项" width="120">
                    <template #default="scope">
                      <span>{{ scope.row.name }}</span>
                    </template>
                  </el-table-column>
                </template>
                <el-table-column
                  :label="
                    [4, '4'].includes(formData.type)
                      ? '填空内容'
                      : [5, '5'].includes(formData.type)
                      ? '问答内容关键字'
                      : '内容（选中选项即为正确答案）'
                  "
                >
                  <template #default="scope">
                    {{ scope.row.content }}
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
            <el-divider />
            <el-form-item label="答案解析：">
              {{ formData.analysis }}
            </el-form-item>
            <el-divider />
            <el-form-item label="适用工种：">
              <el-table
                :data="formData.configs"
                style="width: 100%"
                stripe
                header-cell-class-name="table-header"
              >
                <!-- <el-table-column type="selection" width="55" /> -->
                <el-table-column label="工种" prop="jobPostName" />
                <el-table-column label="对应难度" width="90">
                  <template #default="scope">{{
                    radioList.difficulty[scope.row.difficulty]
                  }}</template>
                </el-table-column>
                <el-table-column
                  property="address"
                  label="学习周期"
                  show-overflow-tooltip
                  width="90"
                >
                  <template #default="scope">{{
                    radioList.period[scope.row.period]
                  }}</template>
                </el-table-column>
              </el-table>
            </el-form-item>
            <el-divider />
            <el-space class="mb-20px">
              <el-button type="primary" plain class="outline" @click="goEdit"
                >编辑</el-button
              >
              <el-button plain @click="back()">返回</el-button>
            </el-space>
          </el-form>
        </div>
      </div>
      <div class="right flex-d-col flex-1 ml-20px">
        <div class="title">&nbsp;</div>
        <div class="flex-d-col h-100%">
          <vue-pdf-app v-if="pdf" style="height: 100%" :pdf="pdf" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
import { ApiGetDictionaryCode } from "@/api/data-dictionary/index";
import { Search } from "@element-plus/icons-vue";
import organizeQuestionBanks from "@/components/organizeQuestionBanks/index.vue";
import selectRegulations from "./components/selectRegulations.vue";
import { QuestionTypeEnum } from "@/enums/QuestionTypeEnum";
import {
  ApiGetJob,
  ApiPostQuestion,
  ApiGetQuestionIdAnswer,
  ApiGetQuestionBankId,
  ApiGetQuestionId,
} from "@/api/resource-management/theory";
import { ApiGetRegulationId } from "@/api/resource-management/regulations";
// import { useTagsViewStore } from "@/store";
import { ApiGetfile } from "@/api/file";
import VuePdfApp from "vue3-pdf-app";
import "vue3-pdf-app/dist/icons/main.css";
import { genFileId, dayjs } from "element-plus";

const route = useRoute();
const router = useRouter();

const { params, query } = route;
const { path } = params;

// const tagsViewStore = useTagsViewStore();
// const { visitedViews } = storeToRefs(tagsViewStore);

const categoryList = ref([]);
onMounted(() => {
  ApiGetDictionaryCode().then((res) => {
    if (res.code == 200) {
      categoryList.value = res.data;
    }
  });
  // 题库进入
  if (query.qId) {
    let queryData = JSON.parse(query.data);

    formData.value.questionBankId = queryData.id;
    formData.value.questionBankName = queryData.name;
    formData.value.railwayBureau = queryData.data.railwayBureau;
    formData.value.trainDepotName = queryData.data.trainDepotName;
    formData.value.stationName = queryData.data.stationName;
  }
  // 规章进入
  if (query.rId) {
    ApiGetRegulationId({ id: query.rId }).then((res) => {
      if (res.code == 200) {
        res.data.publishTime = dayjs(res.data.publishTime).format("YYYY-MM-DD");
        formData.value.regulationId = res.data.id;
        formData.value.regulationData = res.data;
      }
    });
    // 根据题目获取题目详情 获取题库
    if (query.id) {
      ApiGetQuestionId({ id: query.id }).then((res) => {
        if (res.code == 200) {
          ApiGetQuestionBankId({ id: res.data.questionBankId }).then((res) => {
            if (res.code == 200) {
              formData.value.questionBankName = res.data.name;
              formData.value.questionBankId = query.qId;
            }
          });
        }
      });
    }
  }

  ApiGetQuestionIdAnswer({ id: query.id }).then((res) => {
    if (res.code == 200) {
      formData.value = {
        railwayBureau: formData.value.railwayBureau,
        trainDepotName: formData.value.trainDepotName,
        stationName: formData.value.stationName,
        questionBankName: res.data.questionBank,
        regulationData: {
          name: res.data.source,
          publishTime: dayjs(res.data.updateDateTime).format("YYYY-MM-DD"),
        },
        regulationId: res.data.regulationId,
        regulationNum: res.data.number,
        category: res.data.questionKind,
        // categoryName: "12",
        type: res.data.quetionType + 1,
        content: res.data.content,
        questionOptions: res.data.questionOptions.map((e) => {
          return {
            content: e.content,
            isCorrect: e.isCorrect,
            name: e.options,
          };
        }),
        analysis: res.data.topicAnalysis,
        scopeOfApplication: [
          {
            workType: 0,
            difficulty: 0,
            learningCycle: 0,
          },
        ],
        createPerson: res.data.createPerson,
        createDateTime: new Date(),
        updatePerson: res.data.updatePerson,
        updateDateTime: new Date(),
        id: query.id,
      };
      // getFile(formData.value);
    }
  });
});

const formData = ref({
  questionBankId: "",
  questionBankName: "",
  questionOptions: [],
  configs: [],
});

// 选择工种
const radioList = {
  difficulty: {
    1: "简单",
    2: "一般",
    3: "困难",
    4: "地狱",
  },
  period: {
    1: "周",
    2: "月",
    3: "季",
    4: "年",
  },
};

const back = () => {
  // tagsViewStore.back();
  router.back();
};

const pdf = ref("");
// 获取pdf
const getFile = (data) => {
  if (!data.regulation?.file?.id) {
    pdf.value = "";
    return;
  }
  ApiGetfile({ id: data.regulation.file.id }).then((res: any) => {
    const blob = new Blob([res.data], { type: "application/pdf" }); // 保存文件流为 Blob
    pdf.value = URL.createObjectURL(blob); // 转换 Blob 为 URL
  });
};

const goEdit = () => {
  router.push(route.fullPath.replace(/(.*)detail/, "$1edit"));
};
</script>

<style scope lang="scss">
.border {
  border: 1px solid;
  border-radius: 2px;
}
.app-main-container {
  .title {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: bold;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.9);
    line-height: 21px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-bottom: 20px;
  }
  .left {
    height: 100%;
    & > .flex {
      background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.8) 100%);
      border-radius: 20px 20px 20px 20px;
      border: 1px solid rgba(4, 42, 94, 0.1);
    }
    .bg {
      padding: 0 20px;
      background: #eff4ff;
      border-radius: 6px 6px 6px 6px;
    }
    .type {
      background-color: #1759b5;
      font-size: 12px;
      padding: 0 8px;
      border-radius: 6px;
      color: #fff;
    }
    .el-divider {
      &--horizontal {
        margin: 14px 0;
      }
    }
  }
  .right {
    & > .flex-d-col {
      overflow: hidden;
      border-radius: 20px;
    }
  }
}
</style>
